Conditional Rendering
JSのifや3項演算子を使ってUIを出し分けることができる
Element Variables
Reactコンポーネントを変数に格納し、それをJSXでレンダリングすることができる
code:JavaScript
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
function LoginButton(props) {
return <button onClick={props.onClick}>Login</button>;
}
function LogoutButton(props) {
return <button onClick={props.onClick}>Logout</button>;
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = { isLoggedIn: false };
}
handleLoginClick() {
this.setState({ isLoggedIn: true });
}
handleLogoutClick() {
this.setState({ isLoggedIn: false });
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(<LoginControl />, document.getElementById("root"));
Inline If with Logical && Operator
&&演算子を使って、条件付きレンダリングを簡潔に書くこともできる
code:JavaScript
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
Inline If-Else with Conditional Operator
3項演算子が使える
単なる文字列の分岐
Reactコンポーネントのレンダリングの分岐にも
code:JavaScript
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
注意していほしいことは、
絶対はないからチームでルールを決めること
条件が複雑になったらコンポーネント分割を考えること
Preventing Component from Rendering
propsの状態によってレンダリングさせないことも可能
nullを返す
code:JavaScript
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
renderメソッドでnullを返してもコンポーネントのライフサイクルメソッドは発火する